<!-- 考勤-基础设置-考勤提醒 -->
<template>
  <ContentCard>
    <template #header>
      <pageHeaderNew
        :title="title"
        :breadCrumb="breadCrumb"
        showBack
      ></pageHeaderNew>
    </template>
    <div class="wrap">
      <main>
        <a-form :model="form" autoLabelWidth label-align="left">
          <a-collapse
            :default-active-key="['1']"
            expand-icon-position="right"
            :bordered="false"
          >
            <a-collapse-item key="1">
              <template #header>
                <header>
                  <h2>考勤打卡小程序</h2>
                </header>
              </template>
              <a-form-item label="打卡成功声音提醒">
                <a-switch
                  v-model="form.voiceRemindClockInSuccess"
                  size="medium"
                  checkedValue="1"
                  uncheckedValue="2"
                />
              </a-form-item>
              <a-form-item label="打卡成功微信通知">
                <a-switch
                  v-model="form.clockInSuccessfulWeChatNotice"
                  size="medium"
                  checkedValue="1"
                  uncheckedValue="2"
                />
              </a-form-item>
            </a-collapse-item>
          </a-collapse>

          <a-collapse
            :default-active-key="['1']"
            expand-icon-position="right"
            :bordered="false"
          >
            <a-collapse-item key="1">
              <template #header>
                <header>
                  <h2>补卡提醒设置</h2>
                </header>
              </template>
              <a-form-item>
                <template #label>
                  <span>自动推送补卡提醒</span>
                  <a-tooltip content="开启后，系统将自动给员工发送补卡提醒通知">
                    <icon-info-circle-fill
                      style="color: #165dff"
                      font-size="16"
                    />
                  </a-tooltip>
                </template>
                <a-switch
                  v-model="form.automaticPushCardReminder"
                  size="medium"
                  checkedValue="1"
                  uncheckedValue="2"
                />
              </a-form-item>
              <a-form-item label="推送周期">
                <a-space direction="vertical">
                  <a-space style="margin-bottom: 20px">
                    <a-switch
                      v-model="form.everyDayPush"
                      checkedValue="1"
                      uncheckedValue="2"
                    />
                    <div
                      style="
                        margin: 0 10px 0 5px;
                        width: 50px;
                        display: inline-block;
                      "
                    >
                      每日
                    </div>

                    <span
                      ><a-time-picker
                        format="hh:mm:ss"
                        v-model="form.everyDayPushHMS"
                        style="width: 194px"
                      />
                      仅提醒前一天班次内缺卡的人员</span
                    >
                  </a-space>
                  <a-space style="margin-bottom: 20px">
                    <a-switch
                      v-model="form.everyFridayPush"
                      checkedValue="1"
                      uncheckedValue="2"
                    />
                    <div
                      style="
                        margin: 0 10px 0 5px;
                        width: 50px;
                        display: inline-block;
                      "
                    >
                      每周五
                    </div>

                    <span
                      ><a-time-picker
                        format="hh:mm:ss"
                        v-model="form.everyFridayPushHMS"
                        style="width: 194px"
                      />
                      仅提醒从上周五至本周五内缺卡的人员</span
                    >
                  </a-space>
                  <a-space style="margin-bottom: 20px">
                    <a-switch
                      v-model="form.monthlyPush"
                      checkedValue="1"
                      uncheckedValue="2"
                    />
                    <div
                      style="
                        margin: 0 10px 0 5px;
                        width: 50px;
                        display: inline-block;
                      "
                    >
                      每月
                    </div>

                    <a-space>
                      <a-select
                        v-model="form.day"
                        style="background: #e5e6eb"
                        :options="options"
                        placeholder="请选择"
                      >
                      </a-select>
                      <a-time-picker
                        format="hh:mm:ss"
                        v-model="form.monthlyPushHMS"
                        style="width: 194px"
                      />
                      仅提醒当前考勤周期内缺卡的人员
                    </a-space>
                  </a-space>
                </a-space>
              </a-form-item>
            </a-collapse-item>
          </a-collapse>

          <a-collapse
            :default-active-key="['1']"
            expand-icon-position="right"
            :bordered="false"
          >
            <a-collapse-item key="1">
              <template #header>
                <header>
                  <h2>打卡提醒设置</h2>
                </header>
              </template>
              <a-form-item>
                <template #label>
                  <span>自动推送打卡提醒</span>
                  <a-tooltip
                    content="开启后，系统将在规定时段自动给员工推送打卡提醒"
                  >
                    <icon-info-circle-fill
                      style="color: #165dff"
                      font-size="16"
                    />
                  </a-tooltip>
                </template>
                <a-switch
                  v-model="form.automaticPushPunchReminder"
                  size="medium"
                  checkedValue="1"
                  uncheckedValue="2"
                />
              </a-form-item>
              <a-form-item label="上班打卡提醒">
                <a-space direction="vertical">
                  <a-space style="margin-bottom: 20px">
                    <a-switch
                      v-model="form.clockInForWorkFifteenMinutes"
                      checkedValue="1"
                      uncheckedValue="2"
                    >
                    </a-switch>
                    <span>上班前5-15分钟内推送打卡提醒</span>
                  </a-space>
                  <a-space style="margin-bottom: 20px">
                    <a-switch
                      v-model="form.clockInForWorkHalfAnHour"
                      checkedValue="1"
                      uncheckedValue="2"
                    />
                    <span
                      >员工忘记打上班卡，系统会在上班后半小时内推送提醒</span
                    >
                  </a-space>
                </a-space>
              </a-form-item>
              <a-form-item label="下班打卡提醒">
                <a-space style="margin-bottom: 20px">
                  <a-switch
                    v-model="form.clockOutReminderFifteenMinutes"
                    checkedValue="1"
                    uncheckedValue="2"
                  />
                  <span> 下班后5-15分钟内，系统自动推送打卡提醒</span>
                </a-space>
              </a-form-item>
            </a-collapse-item>
          </a-collapse>
        </a-form>
      </main>
      <footer>
        <a-button
          class="btn"
          style="
            margin-right: 20px;
            border: 1px rgba(242, 242, 242, 1) solid;
            background-color: #fff;
          "
          @click="$router.go(-1)"
          >返回</a-button
        >
        <a-button class="btn" type="primary" @click="save">保存</a-button>
      </footer>
    </div>
  </ContentCard>
</template>

<script lang="ts" setup>
import {
  GetAttendanceSetting,
  PutAttendanceSetting
} from '@/apis/attendance/base-setting/index';
import { TAttendanceSetting } from '@/apis/attendance/base-setting/type';
import { Message } from '@arco-design/web-vue';
import { cloneDeep } from 'lodash';
const title = '考勤提醒';
const form = reactive<TAttendanceSetting>({});
const breadCrumb: string[] = ['考勤', '基础设置', '考勤设置', '考勤提醒'];
const options = [
  { value: 1, label: '1号' },
  { value: 2, label: '2号' },
  { value: 3, label: '3号' },
  { value: 4, label: '4号' },
  { value: 5, label: '5号' },
  { value: 6, label: '6号' },
  { value: 7, label: '7号' },
  { value: 8, label: '8号' },
  { value: 9, label: '9号' },
  { value: 10, label: '10号' },
  { value: 11, label: '11号' },
  { value: 12, label: '12号' },
  { value: 13, label: '13号' },
  { value: 14, label: '14号' },
  { value: 15, label: '15号' },
  { value: 16, label: '16号' },
  { value: 17, label: '17号' },
  { value: 18, label: '18号' },
  { value: 19, label: '19号' },
  { value: 20, label: '20号' },
  { value: 21, label: '21号' },
  { value: 22, label: '22号' },
  { value: 23, label: '23号' },
  { value: 24, label: '24号' },
  { value: 25, label: '25号' },
  { value: 26, label: '26号' },
  { value: 27, label: '27号' },
  { value: 28, label: '28号' },
  { value: 29, label: '29号' },
  { value: 30, label: '30号' },
  { value: 31, label: '31号' }
];
const save = async () => {
  try {
    const data = cloneDeep(form);
    if (data.monthlyPushHMS && data.day) {
      data.monthlyPushHMS = `${data.day} ${data.monthlyPushHMS}`;
    } else if (data.day) {
      data.monthlyPushHMS = `${data.day} 00:00:00`;
    }
    delete data.day;
    await PutAttendanceSetting({ list: data });
    Message.info('修改成功');
  } catch (error) {
    console.log(error);
    Message.error('请联系管理员');
  }
};
const init = async () => {
  const res = await GetAttendanceSetting();
  if (res.monthlyPushHMS) {
    const parts = res.monthlyPushHMS.split(' ');
    res.day = parseInt(parts[0]);
    res.monthlyPushHMS = parts[1];
  }
  Object.assign(form, res);
  console.log(res);
};
init();
</script>

<style lang="less" scoped>
.wrap {
  main {
    margin-bottom: 60px;
    overflow: hidden;

    header {
    }
    header h2 {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    header h2::before {
      content: '';
      display: inline-block;
      width: 7px;
      height: 30px;
      background-color: #165dff;
      margin-right: 10px;
    }
    section {
      padding: 0 20px;
    }
  }

  footer {
    height: 60px;
    width: calc(100% - 100px);
    background-color: #fff;
    box-shadow: 1px -1px 10px 0 #cacaca;
    position: fixed;
    bottom: 0;
    left: 10%;
    display: flex;
    justify-content: center;
    align-items: center;

    .btn {
      width: 120px;
      height: 40px;
      border-radius: 5px;
    }
  }
}
:deep(.arco-collapse-item-content) {
  background-color: #fff;
}
</style>
